<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>气瓶二维码生成</title>
    <style>
        .data-form {
            margin-top: 20px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>

<div class="wrapper">
    <div class="main container-fluid" >
        <div class="row">
            <div class="col-md-12">
                <div class="form-group form-inline data-form">
                    <input type="text" name="begin" id="range-begin" class="form-control" placeholder="开始编号，13位数字">-
                    <input type="text" name="end" id="range-end" class="form-control" placeholder="结束编号，13位数字">
                </div>
                <button class="btn btn-primary form-control btn-small" id="batch-create-code" type="button" >批量创建二维码</button>
                <div class="form-group form-inline data-form">
                    <input type="text" name="code" id="code" class="form-control" placeholder="条形码编号，13位数字">
                </div>
                <button class="btn btn-primary form-control btn-small" id= "create-code" type="button" >创建单个二维码</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>

    $("#batch-create-code").click(function() {
        doCodeCreate(true);
    })

    $("#create-code").click(function () {
        doCodeCreate(false);
    })

    var doCodeCreate = function(isBatch) {

        var begin = $("#range-begin").val();
        var end = $("#range-end").val();

        if (begin === undefined || end === undefined) {
            return;
        }

        if (!isBatch) {
            var code = $("#code").val();
            begin = code;
            end = code;
        }

        $.ajax({
            type:"POST",
            url:"gas-tank/code/create",
            contentType: "application/json",
            data: JSON.stringify({'begin' : begin, 'end' : end}),
            success:function(data) {
                handleResult(data)
            }

        })
    }

    var handleResult = function (data) {
        if(data.success ){
            alert("创建成功," + data.data)
        } else{
            alert("创建失败," + data.errorMessage)
        }
    }
</script>
</body>
</html>